<template>
  <div class="table-component">
    <div class="total-amount">
      <div class="total-amount-title">出入照片</div>
    </div>
    <div class="row">
      <div class="order-details">
        <div class="order-details-time">岗亭：{{ detailList.data.entranceName }}</div>
        <el-image
          class="picture"
          :src="'http://cippfile.ecaray.com/' + detailList.data.inImage"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="srcList"
          :initial-index="0"
          fit="cover"
          title="入场照片"
        />
        <div class="order-details-lotName">驶入时间：{{ detailList.data.inTime }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, watch, onMounted } from "vue";

const props = defineProps({
  orderDetails: {
    type: Object,
    default: () => {},
  },
});

const srcList = ref([]);
onMounted(() => {
  watch(
    () => props.orderDetails,
    (newVal, oldVal) => {
      if (newVal) {
        getData();
      }
    },
    {
      immediate: true, // 立即执行一次
      deep: true, // 深度监听对象内部变化
    }
  );
});

const detailList = reactive({
  data: {},
});

const getData = () => {
  detailList.data = props.orderDetails;
  console.log(" detailList.data ===>", detailList.data);
  srcList.value = [
    "http://cippfile.ecaray.com/" + detailList.data.inImage
  ];
};

getData();
</script>

<style lang="less" scoped>
.table-component {
  .total-amount {
    margin-bottom: 24px;
  }
  .total-amount-title {
    font-weight: 600;
    font-size: 20px;
    color: #333333;
  }
  .row {
    display: flex;
    align-items: center;
  }
  .row > div {
    // flex: 1;
    text-align: center;
  }
  .picture {
    width: 312px;
    height: 170px;
  }
  .order-details {
    border-radius: 4px;
    border: 1px solid #e5e8ef;
  }
  .order-details-time {
    font-weight: 600;
    font-size: 16px;
    color: #000000;
    margin: 14px 0 15px;
  }
  .order-details-lotName {
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    margin: 15px 0 14px;
  }
}
</style>
